import React from 'react'
import RankList from './RankList'
import { hostname } from "../../config/host.config"
import axios from "../../config/axios"

import '../../static/common.css'

export default class Rank extends React.Component {
    constructor(props) {
        super(props)
        this.state = { rankList: [] }
    }

    async getArticleList() {
        const res = await axios.get(hostname + '/blog/rank')
        if (res.status === 200 && res.data.statusCode === 1) {
            this.setState({ rankList: res.data.statusMsg })
        }
    }

    componentDidMount() {
        this.getArticleList()
    }

    render() {
        return (
            <div className="card Rank">
                <div className="rankTitle">排行榜</div>
                {this.state.rankList.map((value) =>
                    (<RankList readText={value.title} readNum={value.totalRead} articleId={value.id} key={value.id} />)
                )}
                <style jsx>{`
                    .Rank {
                        margin: 15px 0;
                    }
                    .rankTitle {
                        margin: 5px 15px;
                        font-size: 16px;
                        font-weight: bold;
                    }
                `}</style>
            </div>
        )
    }
}